<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <el-input v-model="query.name" clearable size="small" class="filter-item" style="width: 200px" placeholder="请输入模板名称" @keyup.enter.native="crud.toQuery" />
        <el-select v-model="query.contrastScene" class="filter-item" style="width: 200px" placeholder="请选择比对场景" filterable clearable>
          <el-option v-for="item in contrastSceneOptions" :key="item.key" :label="item.label" :value="item.key" />
        </el-select>
        <rrOperation :crud="crud" />
      </div>
      <crudOperation show="" :permission="permission" />
    </div>
    <el-table
      ref="table"
      :data="crud.data"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
      @filter-change="crud.handleFilterChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column v-if="columns.visible('name')" prop="name" label="模板名称" />
      <el-table-column v-if="columns.visible('contrastScene')" prop="contrastScene" label="比对场景">
        <template slot-scope="scope">
          <el-tag>{{ formatterContrastScene(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('isCycleContrast')" prop="isCycleContrast" label="是否周期">
        <template slot-scope="scope">
          <el-tag>{{ formatterCycle(scope.row) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('cronExpressions')" prop="cronExpressions" label="CRON表达式">
        <template slot-scope="scope">
          <p>{{ formatterCronExpressions(scope.row) }}</p>
        </template>
      </el-table-column>
      <el-table-column v-if="columns.visible('upUserName')" prop="upUserName" label="更新人" />
      <el-table-column v-if="columns.visible('upTs')" prop="upTs" label="更新时间" min-width="150" />
    </el-table>
    <pagination />
    <!--新增/编辑弹窗-->
    <el-dialog
      append-to-body
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="900px"
      top="5vh"
    >
      <el-form ref="form" :inline="true" :model="form" :rules="rules" label-width="150px">
        <contrast-template-list dialog-type="detail" :form="form" />
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="crud.cancelCU">取消</el-button>
        <el-button type="primary" @click="crud.submitCU">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import contrastTemplateApi from '@/api/data/contrast/contrastTemplate'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/expand/data/contrast/template/CRUD.operation.vue'
import pagination from '@crud/Pagination'
import ContrastTemplateList from './contrast-template-info'
const defaultCrud = CRUD({
  title: '模板配置',
  url: 'api/cross/db/contrast/template',
  crudMethod: { ...contrastTemplateApi }
})
const defaultForm = {
  pkId: null,
  name: null,
  cronExpressions: '',
  isCycleContrast: 'N',
  contrastScene: 'full',
  isCreateTable: 'Y',
  isContrastPartitionField: '',
  isContrastFieldCount: 'Y',
  isContrastFieldName: 'Y',
  isContrastFieldType: 'N',
  isContrastFieldLength: 'N',
  isContrastFieldPrecision: 'N',
  isContrastEncoded: 'N',
  isHasData: 'Y',
  isSumCharLength: '',
  isSumCharTrimLength: '',
  isMaxCharLength: '',
  isStatisticsNumberSum: '',
  isStatisticsDataCount: 'Y',
  isAllField: 'Y',
  isCharNullToEmpty: 'Y',
  isNumberNullToZero: 'Y',
  isMaxFaultTolerance: 'Y',
  maxFaultToleranceNum: '10',
  dataComparisonType: 'DETAIL',
  dataExtractScope: 100,
  lessExtractScopeType: 'ALL',
  lessExtractScopeCustom: 10,
  greaterExtractScopeType: 'CUSTOM',
  greaterExtractScopeCustom: 10
}

export default {
  components: { ContrastTemplateList, crudOperation, rrOperation, pagination },
  mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()],
  data() {
    var validateModuleName = (rule, value, callback) => {
      if (value === '' || value === null || value === undefined) {
        callback(new Error('请输入模板名称'))
      } else {
        if (this.form.pkId) {
          if (this.tempPkId !== this.form.pkId) {
            this.tempPkId = this.form.pkId
            this.tempModuleName = this.form.validateName
          }
        }
        const params = {
          name: value,
          size: 500000
        }
        contrastTemplateApi.findListByPage(params).then(rsp => {
          if (rsp.total > 0) {
            const isExist = rsp.content.some(item => item.name === value)
            if (isExist && this.tempModuleName !== value) {
              callback(new Error('模板名称已存在！'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        })
      }
    }
    return {
      acceptFileType: '.xls,.xlsx',
      permission: {
        add: ['admin', 'template:add'],
        edit: ['admin', 'template:edit'],
        del: ['admin', 'template:del']
      },
      contrastSceneOptions: [
        { key: 'TODAY', label: '当天' },
        { key: 'YESTERDAY', label: '昨天' },
        { key: 'ENDOFLASTMONTH', label: '上月末' },
        { key: 'FULL', label: '全表数据' }
      ],
      detailFlag: false,
      tempPkId: '',
      tempModuleName: '',
      rules: {
        name: [
          { required: true, validator: validateModuleName, trigger: 'blur' }
        ],
        cronExpressions: [
          { required: true, message: '请输入CRON表达式', trigger: 'blur' }
        ],
        contrastScene: [
          { required: true, message: '请选择比对场景', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.crud.resetQuery(false)
  },
  methods: {
    [CRUD.HOOK.beforeToAdd](crud) {
      this.form.pkId = null
    },
    [CRUD.HOOK.beforeToEdit](crud) {
      this.form = crud.form
      // 用于编辑功能时获取任务名称
      this.form.validateName = this.form.name
    },
    formatterContrastScene(row) {
      if (row.contrastScene === 'today') {
        return '当天'
      } else if (row.contrastScene === 'yesterday') {
        return '昨天'
      } else if (row.contrastScene === 'endOfLastMonth') {
        return '上月末'
      } else {
        return '全表数据'
      }
    },
    formatterCycle(row) {
      if (row.contrastType === 'cycle') {
        return '是'
      } else {
        return '否'
      }
    },
    formatterCronExpressions(row) {
      if (row.cronExpressions === null) {
        return '非周期执行'
      } else {
        return row.cronExpressions
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container .el-divider--horizontal{
  margin: 5px 0px;
}
</style>
